<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <el-button @click="tobs">操作按钮</el-button>
      <div ref="bs_chart" style="height: 320px"></div>
    </el-card>
  </div>
</template>


<script>
import * as echarts from "echarts";
import { bsChartsDaily } from "@/api/bs/bs";

export default {

  name: "bscharts",
  data() {
    return {
      bsData:{
        userId:1,
        days:3
      },
      name: "",
      bs_chart: null,
      bs_chart_option: {
        grid: {
          left: "0%", // 设置图表距离容器左侧的距离
          top: "30%",
          bottom: "1%",
          containLabel: true, // 保证标签不会被裁剪或溢出
        },
        color: ["#f16331"], // 自定义柱状图和折线图的颜色
        title: {
          text: "马洪哲的步数统计",
        },
        tooltip: {},
        legend: {
          data: ["今日",'本周','本月'],
        },
        xAxis: {
          data: [
            "00:00-02:00",
            "02:00-04:00",
            "04:00-06:00",
            "06:00-08:00",
            "08:00-10:00",
            "10:00-12:00",
            "12:00-14:00",
            "14:00-16:00",
            "16:00-18:00",
            "18:00-20:00",
            "20:00-22:00",
            "22:00-24:00",
          ],
          axisLine: {
            show: true,
            symbol: ["none", "arrow"], // 使用箭头
            symbolSize: [5, 10], // 箭头大小
          },
        },
        yAxis: {
          name: "步数 (步)",
          type: "value",
          axisLine: {
            show: true,
            symbol: ["none", "arrow"], // 使用箭头
            symbolSize: [5, 10], // 箭头大小
          },
          axisLabel: {
            formatter: "{value} 步",
          },
          splitLine: {
            lineStyle: {
              color: "#e7e7e7",
            },
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
            },
          },
        },
        series: [
        {
          name: '今日',
          type: 'bar',
          data: [500, 200, 360, 100, 1000, 200, 300, 400, 350, 500, 550, 400],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 步';
            }
          },
        },
        {
          name: '本周',
          type: 'bar',
          data: [500, 200, 360, 100, 1000, 200, 300, 400, 350, 500, 550, 400],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 步';
            }
          },
        },
        {
          name: '本月',
          type: 'bar',
          data: [500, 200, 360, 100, 1000, 200, 300, 400, 350, 500, 550, 400],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 步';
            }
          },
        },
        ],
      },
    };
  },
  created() {
    this.get_bs_chart();
  },
  methods: {
    //前往步数数据详情
    tobs(){
      alert(1)
      this.$router.push('/bs/bs/index');
    },
    get_bs_chart() {
      this.$nextTick(() => {
        this.bs_chart = echarts.init(this.$refs.bs_chart, "macarons");
        this.bs_chart.setOption(this.bs_chart_option);
        window.addEventListener("resize", () => {
          this.bs_chart.resize();
        });
      });
    },
    //获取图表信息
    getData(){
      bsChartsDaily(this.bsData).then(res =>{
        console.log(res);
      })
    }
  },
  mounted(){
    this.getData();
  }
};
</script>


<style scoped lang="scss">
</style>
